<template>
   <div class="bordercontents2" :ref="ref">
        <svg class="dv-border-svg-container" :width="width" :height="height"> 
            <defs>
                <filter id="filterId" height="150%" width="150%" x="-25%" y="-25%">
                  <feMorphology operator="dilate" radius="2" in="SourceAlpha" result="thicken" />
                  <feGaussianBlur in="thicken" stdDeviation="3" result="blurred" />
                  <feFlood flood-color="#2feefb" result="glowColor" />
                  <feComposite in="glowColor" in2="blurred" operator="in" result="softGlowColored" />
                  <feMerge>
                    <feMergeNode in="softGlowColored"/>
                    <feMergeNode in="SourceGraphic"/>
                  </feMerge>
                </filter>
              </defs>         
            <polyline :class="['dv-bb7-line-width-2',transfroms?'dot':'']"  points="0,20 0,10 0,10 10,0 20,0"
            /> 
            <polyline :class="['dv-bb7-line-width-3']" :filter="filter?'url(#filterId)':''"   :points="`2,10 10,2 ${width-20},2 ${width-2},20 ${width-2},${height-20} ${width-2},${height-10} ${width-10},${height-2} 20,${height-2} 2 ,${height-20} 2,10`"
           style="fill: none; stroke-opacity: .5"
           /> 
            <!-- y,x -->
            <!-- 起始位置,点(y,x),...,结束位置 -->
            <!-- w:100,h:100 -->
               <polyline
                    class="dv-bb7-line-width-2"
                    :points="`3,${height-13} 13,${height-3} 13,${height-3}`"
                    style="fill: none; stroke-opacity: 1"
                    />
            <!-- 右下 -->
            <polyline :class="['dv-bb7-line-width-2',transfroms?'dot':'']" :points="`${width-20},${height} ${width-10},${height} ${width},${height-10} ${width},${height-20}`"
            style="fill:none;"/> 
        
       </svg>
       <div class="echartCon">
            <div>
                <slot></slot>
            </div>
       </div>
    </div>
</template>

<script>
import autoMinix from "../autoResize.js";
import {defineComponent,toRaw} from "vue-demi";

export default defineComponent({
  name: "VDorderLine8",
  mixins: [autoMinix],
  props:{
       transfroms:{
            type:Boolean,
            default:()=>false
       },
       filter:{
         type:Boolean,
            default:()=>false
       } 
  },
   data(){
     return {
       ref:'VDorderLine8',
     }
  },  
  setup() {
    let ref = toRaw('VDorderLine8')   
    return {
      ref
    };
  },
});
</script>

<style lang="less" scoped>
   .dv-border-svg-container > polyline {
        fill: none;
        stroke-linecap: round;
        }
        .dv-bb7-line-width-2 {
        stroke-width: 2;
        stroke:#2feefb;
        } 
        .dv-bb7-line-width-3 {
        stroke-width: 1;
        stroke:#2feefb;
        } 
     .bordercontents2{
            position: relative;
            width: 100%;
            height: 100%;
     }  
     .dv-border-svg-container{
            position: absolute;
            top: 0;
            left: 0;
     }   
     .echartCon{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            padding: .5rem .5rem;
            box-sizing: border-box;
            &>div{
                 background: rgba(13, 18, 39, 0.3);
                 border-radius: 15px;
            }
            
     } 
     .echartCon>div{
          width: 100%;
          height: 100%;
          /* box-shadow: inset 0 0 40px rgba(8, 230, 238, 0.63); */
     }
     .dot{
        stroke-dashoffset: 100;
        /* 偏移量，整数是靠左边，负数是靠右边 */
        /* -webkit-transition: all .9s cubic-bezier(.19,1,.22,1);
        transition: all 2.9s cubic-bezier(.19,1,.22,1); */
        stroke-dasharray:30 20; 
        animation: dots 3s linear infinite; 
     }
     @keyframes dots {
         0%{
            stroke-dashoffset: 300; 
         }100%{
            stroke-dashoffset: 500;
         }
     }
</style>